<template>
  <Header></Header>
  <div class="login-wrap">
    <img :src="loginBG" alt=""/>
    <div class="login-form">
      <div class="form-content">
        <header class="form-title">
          <h1>Vue3后台管理系统</h1>
        </header>
        <div class="form-input">
          <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="账号:" prop="account">
              <el-input v-model="form.account" placeholder="请输入账号地址"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="form-button">
                <el-button color="#15b194" type="primary" @click="submit">登 录</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import Header from './components/Header.vue'
import loginBG from '@/assets/images/loginBG.png'

import { reactive, ref, unref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

const formRef = ref()
const form = reactive({
  account: '',
  password: ''
})
const rules = reactive({
  account: [{ required: true, trigger: 'blur', message: '账号不能为空' }],
  password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
})

// 提交登录
const loading = ref(false)
const submit = () => {
  formRef.value.validate((valid:boolean) => {
    if (valid) {
      login()
    }
  })
}

const login = () => {
  loading.value = true
  const params = unref(form)
  userStore.login(params).then(res => {
    loading.value = false
    router.push('/')
  }).catch(err => {
    console.error(err)
    loading.value = false
  })
}
</script>

<style lang="less" scoped>
.login-wrap {
  position: absolute;
  height: calc(100vh - 48px);
  width: 100%;
  background-color:#f5f5fa;
  display: flex;
  align-items: center;
  overflow: auto;
  justify-content: space-around;
  -webkit-box-align: center;
  cursor: default;
  --el-color-primary: #15b194;
  img {
    width: 40%;
    vertical-align: middle;
    border-style: none;
  }

  .login-form {
    display: flex;
    width: 40%;
    -webkit-box-pack: center;
    justify-content: center;
    .form-content {
      display: flex;
      flex-direction: column;
      width: 55%;
      background-color: #FFFFFF;
      padding: 20px;
      border: none;
      box-shadow: 0 0 10px #eee;
      border-radius: 12px;
      .form-title {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        h1 {
          text-align: center;
          padding: 0;
          margin: 0;
          font-weight: 600;
          white-space: nowrap;
          font-size: 24px;
          line-height: 20px;
          color: #000;
        }
      }

      .form-input {
        :deep(.el-input__inner){
          height: 30px;
        }
        :deep(.is-focus){
          box-shadow: 0 0 0 0.5px black;
        }
        .form-button {
          width: 100%;
          margin-top: 12px;
          display: flex;
          :deep(.el-button){
            width: 100%;
            height: 38px;
            border-radius: 2px;
            font-weight: 600;
            line-height: 15px;
            border: 1.2px solid #15b194
          }
        }
      }
    }
  }
}
</style>
